<template>
  <div class="app-container" v-loading="pageLoading">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="topTitle">
          <div class="top-title">班表</div>
          <el-button type="primary" class="fr" @click="createItem">创建</el-button>
          <div class="filter-container flex flex-center">
            <el-input style="width: 200px" placeholder="请输入班次名称" clearable prefix-icon="el-icon-search"
              @keyup.enter="research" @clear="research" v-model="query.ShiftName">
            </el-input>
            <el-button class="ml-20" type="success" plain @click="research">搜索</el-button>
            <!-- <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">
              {{$c('export')}}
            </el-button> -->
          </div>
          <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem"
            @deleteItem="deleteItem" @row-click="rowClick">
            <template v-slot:content="{ row, key }">
              <span v-if="key == 'ShiftType'">{{ row[key] == 1 ? '夜班' : '白班' }}</span>
              <span v-else> {{ row[key] }}</span>
            </template>
            <template v-slot:operation="v">
              <div class="flex flex-row-sa">
                <a href="#" class="text-blue mr-10" @click.prevent="editItem(v.row, v.$index)">编辑</a>
                <a href="#" class="text-red" @click.prevent="deleteItem(v.row, v.$index)">删除</a>
              </div>
            </template>
          </z-table>
          <z-pagination :pagination="pagination" :total="total" v-model:page="query.limit" v-model:limit="query.rows"
            @change="getList"></z-pagination>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="topTitle">
          <div class="top-title">
            <span class="text-blue mr10" v-if="rightQuery.ShiftName">{{ rightQuery.ShiftName }}</span>班表明细
          </div>
          <el-button type="primary" class="fr mb10" :disabled="!rightQuery.ShiftId" @click="createItem2">
            创建
          </el-button>
          <z-table :list="rightList" :tableProps="tableProps" :columns="columns2" @editItem="editItem"
            @deleteItem="deleteItem">
            <template v-slot:content="{ row, key }">
              <span v-if="key == 'ClockInType'">{{ ['正常上班', '休息', '加班'][row[key] - 1] }}</span>
              <span v-else-if="key == 'StartTime'" v-timeFormat="row[key]" format="HH:mm"></span>
              <span v-else-if="key == 'EndTime'" v-timeFormat="row[key]" format="HH:mm"></span>
              <!-- <span v-else-if="key == 'Hours'"></span> -->
              <span v-else> {{ row[key] }}</span>
            </template>
            <template v-slot:operation="v">
              <div class="flex flex-row-sa">
                <a href="#" class="text-blue mr-10" @click.prevent="editItem2(v.row, v.$index)">编辑</a>
                <a href="#" class="text-red" @click.prevent="deleteItem2(v.row, v.$index)">删除</a>
              </div>
            </template>
          </z-table>
          <z-pagination :pagination="pagination" :total="rightTotal" v-model:page="rightQuery.limit"
            v-model:limit="rightQuery.rows" @change="getRightList"></z-pagination>
        </div>
      </el-col>
    </el-row>

    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" v-model="editFormVisible"></z-form-dialog>
    <z-form-dialog :name="name" :data="data2" :formProps="formProps" :fields="rightFieIds" @submit="submit2"
      :submitLoading="submitLoading" v-model="editFormVisible2"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import dayjs from 'dayjs'
import _ from 'lodash'
export default {
  mixins: [commonMixin],
  name: 'shift',
  data: function () {
    return {
      api: this.$api.shift,
      apiDetail: this.$api.shiftDetail,
      name: '班次信息',
      tableProps: {
        border: true,
        opsColWith: 100,
        hideOperations: false,
        NOscrollBar: true,
        'highlight-current-row':true
      },
      rightQuery: {
        limit: 1,
        rows: 10,
      },
      rightTotal: 0,
      columns: [
        { title: '班次编码', key: 'ShiftCode', width: 100 },
        { title: '班次名称', key: 'ShiftName' },
        { title: '班次类型', key: 'ShiftType', width: 100 },
        { title: '创建人', key: 'Creator', width: 100 },
        { title: '创建时间', key: 'CreateTime', width: 180 },
      ],
      columns2: [
        { title: '类型', key: 'ClockInType' },
        { title: '开始时间', key: 'StartTime' },
        { title: '结束时间', key: 'EndTime' },
        { title: '工时(min)', key: 'Hours' },
      ],
      fields: [
        { title: '班次编码', key: 'ShiftCode' },
        { title: '班次名称', key: 'ShiftName' },

        {
          title: '班次类型',
          key: 'ShiftType',
          name: 'select',
          options: [
            { value: '白班', key: 0 },
            { value: '夜班', key: 1 },
          ],
        },
      ],
      rightFieIds: [
        {
          title: '开始时间类型',
          key: 'StartType',
          name: 'radio',
          options: [
            {
              label: '今天',
              value: 0,
            },
            {
              label: '明天',
              value: 1,
            },
          ],
          span: 8,
        },
        {
          title: '开始时间',
          key: 'StartTime',
          name: 'timeSelect',
          props: {
            start: '00:00',
            step: '00:05',
            end: '23:59',
          },
          span: 16,
        },
        {
          title: '结束时间类型',
          key: 'EndType',
          name: 'radio',
          options: [
            {
              label: '今天',
              value: 0,
            },
            {
              label: '明天',
              value: 1,
            },
          ],
          span: 8,
        },
        {
          title: '结束时间',
          key: 'EndTime',
          name: 'timeSelect',
          props: {
            start: '00:00',
            step: '00:05',
            end: '23:59',
          },
          span: 16,
        },

        {
          title: '类型',
          key: 'ClockInType',
          name: 'select',
          options: [
            { value: '正常上班', key: 1 },
            { value: '休息', key: 2 },
            { value: '加班', key: 3 },
          ],
        },
      ],
      initData: {},
      initData2: {
        StartType: 0,
        EndType: 0,
        ClockInType: 1

      },
      data2: {
      },
      editFormVisible2: false,
      rightList: [],
      // typeOptions: [],
    }
  },
  filters: {
    dataTime: function (val) {
      return dayjs(val).format('HH:mm')
    },
  },
  methods: {
    rowClick(row) {
      this.rightQuery.ShiftId = row.ShiftId
      this.rightQuery.ShiftName = row.ShiftName
      this.getRightList()
    },
    createItem() {
      this.setFieldsDisable(false, ['ShiftCode', 'ShiftType'])
      this.data = _.cloneDeep(this.initData)
      this.editFormVisible = true
    },
    editItem(v) {
      this.setFieldsDisable(true, ['ShiftCode', 'ShiftType'])

      this.data = { ...this.formatAfterGet(v) }
      this.editFormVisible = true
    },

    getRightList() {
      this.rightLoading = true
      this.rightQuery = {
        ...this.rightQuery, 
        sort:'StartTime',
        order: 'asc',
        wheres: JSON.stringify([{
          name: "ShiftId",
          value: this.rightQuery.ShiftId,
        }])
      }
      this.http.post(this.apiDetail + 'GetPageData', this.rightQuery)
        .then((r) => {
          this.rightList = r.rows
          this.rightTotal = r.total
          this.rightLoading = false
        })
        .catch(() => {
          this.rightLoading = false
        })
    },
    createItem2() {
      this.data2 = _.cloneDeep(this.initData2)
      this.data2.ShiftId = this.rightQuery.ShiftId
      if (this.rightList.length > 0) {
        let tmp = _.cloneDeep(this.rightList[this.rightList.length - 1])
        this.data2.StartTime = dayjs(tmp.EndTime).format('HH:mm')
        this.data2.StartType = tmp.EndType
        this.data2.EndType = tmp.EndType
        // this.$set(this.data2, 'StartTime', dayjs(tmp.EndTime).format('HH:mm'))
        // this.$set(this.data2, 'StartType', tmp.EndType)
        // this.$set(this.data2, 'EndType', tmp.EndType)
      }
      this.editFormVisible2 = true
    },
    afterData2(data) {
      let tmp = _.cloneDeep(data)
      try {
        tmp.StartTime = dayjs(tmp.StartTime).format('HH:mm')
        tmp.EndTime = dayjs(tmp.EndTime).format('HH:mm')
      } catch (error) {
        tmp.StartTime = tmp.StartTime
        tmp.EndTime = tmp.EndTime
      }
      return tmp
    },
    editItem2(row) {
      this.data2 = { ...this.afterData2(row) }
      this.editFormVisible2 = true
    },
    getList() {
      this.pageLoading = true
      let url = this.api + 'getPageData'
      this.http
        .post(url, this.formatQuery(this.query))
        .then((r) => {
          this.list = this.formatList(r.rows)
          this.total = r.total
        })
        .finally(() => {
          this.pageLoading = false
        })
    },
    beforeFormatData2(data) {
      let tmp = _.cloneDeep(data)
      let tmp2 = _.cloneDeep(data)
      tmp2.StartTime = `2020-01-0${data.StartType ? 2 : 1} ${data.StartTime}:00`
      tmp2.EndTime = `2020-01-0${data.EndType ? 2 : 1} ${data.EndTime}:00`
      
     // data.Hours = dayjs(tmp.EndTime).diff(dayjs(tmp.StartTime), 'minutes')
      tmp.mainData = tmp2
      return tmp
    },
    submit() {
      let insertUrl = this.apiCreate || this.api + 'add'
      let updateUrl = this.apiEdit || this.api + 'update'
      let url = this.data.ShiftId ? updateUrl : insertUrl
      let data = this.formatBeforeSave(this.data)
      let check = this.validataData(this.fields, data)
      if (!check) return
      this.submitLoading = true
      this.http
        .post(url, { mainData: data })
        .then((r) => {
          this.editFormVisible = false
          this.getList()
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    deleteItem(v) {
      this.$confirm('确定要删除这条记录？').then(() => {
        this.pageLoading = true
        let url = this.api + 'del'
        this.http
          .post(url, [v.ShiftId])
          .then((r) => {
            this.getList()
          })
          .finally(() => {
            this.pageLoading = false
          })
      })
    },


    submit2() {
      let tmp = this.beforeFormatData2(this.data2)
      tmp.mainData.Hours = dayjs(tmp.mainData.EndTime).diff(dayjs(tmp.mainData.StartTime), 'minutes')

      if (new Date(tmp.StartTime).getTime() > new Date(tmp.EndTime).getTime()) {
        this.$message.error('结束时间应小于开始时间')
        return
      }

      this.submitLoading = true
      let url = this.data2.ShiftDetailId? this.apiDetail + 'update' : this.apiDetail + 'add'
      this.http.post(url, tmp, 'post')
        .then((r) => {
          this.rightQuery.limit = 1
          this.getRightList()
          this.submitLoading = false
          this.editFormVisible2 = false
        })
        .catch(() => {
          this.submitLoading = false
        })
    },
    deleteItem2(v) {
      this.$confirm('确定要删除这条记录？', '操作确认')
        .then(() => {
          this.pageLoading = true
          let url = this.apiDetail + 'del'
          this.http.post(url, [v.ShiftDetailId],)
            .then((r) => {
              this.getRightList()
            })
            .finally(() => {
              this.pageLoading = false
            })
        })
        .catch(() => { })
    },
  },
  created() {
    this.getList()
  },
}
</script>
<style lang="scss" scoped>
// 引入style 样式
@import '../../../style/index.scss';

.topTitle {
  border: 1px solid #e4e4e4;
  padding: 38px 10px 10px;
  position: relative;
}

.topTitle .top-title {
  transition: all 0.5s;
  color: #666;
  background: #f1f1f1;
  height: 28px;
  line-height: 28px;
  position: absolute;
  width: 100%;
  left: -10px;
  font-size: 12px;
  font-weight: 500;
  padding-left: 20px;
  top: 0;
  left: 0;
  // letter-spacing: 2px;
  z-index: 9;
}
</style>
